<template>
  <div>
    <el-dialog title="修改密码" :visible.sync="openDialog" width="500px" :close-on-click-modal="false" :append-to-body="true" @close="onDialogClose">
      <el-form ref="dialogForm" :model="dialogForm" @submit.native.prevent :rules="rules" label-width="80px">
        <el-form-item label="密码" prop="password">
            <el-input v-model.trim="dialogForm.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="openDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码成功" :visible.sync="openSuccessDialog" width="500px" :close-on-click-modal="false" :append-to-body="true" @close="openSuccessDialog=false">
      <div class="editSuccessWrapper">
        <div>登录账号：{{ loginAccount }}</div>
        <div>登录密码：{{ loginPwd }}</div>
      </div>
    </el-dialog>
    <AuthCode ref="AuthCode" :visible.sync="openAuth" :title="authTitle" :authObj="authObj" @submit="submitAuth"/>
  </div>
</template>
<script type="text/javascript">
import { getPwdMD5Str } from '@/utils'
import AuthCode from '@/components/auth-code'
import { sendCode } from '@/api/member/product'
import { updatePassword } from '@/api/login'
export default {
  name: 'EditPassword',
  props: {
    visible: Boolean,
    account: String
  },
  components: { AuthCode },
  data () {
    return {
      openAuth: false,
      openSuccessDialog: false,
      loginAccount: '',
      loginPwd: '',
      authTitle: '',
      authObj: {},

      dialogForm: {
        password: ''
      },
      rules: {
        password: [
          {
            trigger: [],
            validator: (rule, value, cb) => {
              if (!(/^.{8,16}$/.test(value))) {
                cb(new Error('密码长度为8位到16位'))
              } else if (!/^(?=.*[0-9].*)(?=.*[A-Za-z].*).{8,16}$/.test(value)) {
                cb(new Error('密码必须包含数字和字母'))
              } else {
                cb()
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    openDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    submitAuth (codeObj) {
      console.log('coreObj', codeObj)
      if (!codeObj.vid) {
        this.$message({
          type: 'error',
          message: '请先发送验证码'
        })
        this.$refs.AuthCode.cancelLoading()
        return
      }
      const password = this.dialogForm.password
      updatePassword({
        user_id: Number(this.account),
        from_certificate_type: 'anonymous',
        password: getPwdMD5Str(password)
      }, codeObj).then((rs) => {
        if (rs.code === 200) {
          this.loginAccount = rs.data.union_id
          this.loginPwd = this.dialogForm.password
          this.$message({
            type: 'success',
            message: '修改密码成功!'
          })
          this.openAuth = false
          this.openDialog = false
          this.openSuccessDialog = true
        }
      }).catch(e => {
        this.$refs.AuthCode.cancelLoading()
      })
    },
    onDialogClose () {
      this.resetForm('dialogForm')
    },
    submit () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.authObj = {
            type: 'generate_pwd_certificate',
            data: {
              user_id: this.account,
              from_certificate_type: 'anonymous'
            },
            mock: process.env.NODE_ENV === 'development'
          }

          sendCode(this.authObj).then(res => {
            if (res.data.need_verify) {
              this.authTitle = `确定修改密码吗？验证码通过验证后才可进行操作`
              this.openAuth = true
            } else {
              this.submitAuth({
                code: res.data.code,
                vid: res.data.vid
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.editSuccessWrapper{
  display: flex;
  flex-direction: column;
  gap:20px;
  margin:0px 20px 10px;
}
</style>
